<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 200px;
            top: 200px;
            /* cursor: none; */
        }
    </style>
</head>

<body style="height: 3000px;">
    <div class="box"></div>
</body>

</html>
<script>
    //一.event属性介绍
    //1.button属性
    // 标准浏览器的鼠标事件，会有一个button属性，它是一个数字，代表鼠标按键。
    // 0 代表鼠标按下了左键 1 代表按下了滚轮 2 代表按下了右键
    // document.onmousedown = function(ev) {
    //     var ev = ev || window.event;
    //     alert(ev.button);
    // }

    //2.鼠标事件中获取鼠标的位置属性
    // 2.1.clientX,clientY：鼠标相对于可视区的位置 - 重点
    // var oBox = document.querySelector('.box');
    // document.onmousemove = function(ev) {
    // var ev = ev || window.event;
    // console.log(ev.clientX, ev.clientY);
    // oBox.style.left = ev.clientX + 'px';
    // oBox.style.top = ev.clientY + 'px';

    // oBox.style.left = ev.clientX - oBox.offsetWidth / 2 + 'px';
    // oBox.style.top = ev.clientY - oBox.offsetHeight / 2 + 'px';
    // }

    //2.2.pageX,pageY：鼠标相对于文档的位置 - 重点
    // document.onmousemove = function(ev) {
    //     var ev = ev || window.event;
    //     console.log('可视区位置：' + ev.clientX, ev.clientY);
    //     console.log('文档位置：' + ev.pageX, ev.pageY);
    // }

    //2.3.offsetX,offsetY：鼠标相对于操作元素(鼠标位置)到元素边缘(左上)的位置 - 拖拽重点
    //核心：和当前操作的元素对象有关。
    // var oBox = document.querySelector('.box');
    // oBox.onmousemove = function(ev) {
    //     var ev = ev || window.event;
    //     console.log(ev.offsetX, ev.offsetY);
    // }

    //2.4.screenX,screenY :鼠标相对于屏幕的位置
    // document.onmousemove = function(ev) {
    //     var ev = ev || window.event;
    //     console.log(ev.screenX, ev.screenY);
    // }

    //3.keyCode和which获取键盘上按键对应的unicode编码
    //键盘上按键的unicode编码。
    //which:获取鼠标和键盘按键对应的unicode的编码。标准浏览器最喜欢。
    //space 32  enter 13
    // document.onkeydown = function(ev) {
    //     var ev = ev || window.event;
    //     // console.log(ev.keyCode);
    //     // console.log(ev.which);
    //     var code = ev.which || ev.keyCode; //兼容的写法。
    //     console.log(code);
    // }

    // document.onmousedown = function(ev) {
    //     var ev = ev || window.event;
    //     console.log(ev.which); //鼠标：1，2，3左中右  button:0,1,2左中右
    // }

    //4.组合键event.ctrlKey、event.altKey、event.shiftKey 分别代表ctrl alt shift键

    //5.重要问题。
    //键盘事件只能添加给document，不能给具体的标签添加键盘事件，键盘是固定的。
</script>